<template>
	<view>
		<!-- 顶部检索条件 -->
		<view class="top" @tap='change'>
			<view class="top-item">
				<view>爱情ID<span :class="{'right':maskShow}" class="down"></span></view>
			</view>
			<view class="top-item">
				<view>性别<span :class="{'right':maskShow}" class="down"></span></view>
			</view>
			<view class="top-item">
				<view>年龄<span :class="{'right':maskShow}" class="down"></span></view>
			</view>
			<view class="top-item">
				<view>收入<span :class="{'right':maskShow}" class="down"></span></view>
			</view>
		</view>

		<view class="verified-imgs">
			<view class="img-items" v-for="(vfitem,vfindex) in verifiedList" :key="vfindex">
				<view class="img-items-box" @tap="toPersonal(vfitem)">
					<image :src="vfitem.avatar?vfitem.avatar:'https://friend.tanshishang.cn/assets/img/avatar2.png'" mode=""></image>
					<view class="verified-title">
						<text>{{ vfitem.nickname }}</text>
						<i class="iconfont iconqiangtiao1" v-if="vfitem.gender==1" style="margin-left: 20rpx;color: #0091FF;"></i>
						<i class="iconfont iconicon_nv" v-if="vfitem.gender==2" style="margin-left: 20rpx;color: #FF77A1;"></i>
					</view>
					<!-- <view class="verified-cate">{{ vfitem.age?vfitem.age:'-' }}<text>|</text>{{ vfitem.industry?vfitem.industry:'-' }}<text>|</text>{{ vfitem.habitation?vfitem.habitation:'-' }}</view> -->
					<view class="verified-cate" v-if="vfitem.age || vfitem.industry || vfitem.habitation">
						{{ vfitem.age?vfitem.age+'岁':'' }}
						<text v-if="vfitem.height">|</text>
						{{ vfitem.height?vfitem.height+'cm':'' }}
						<text v-if="vfitem.heightdata">|</text>
						{{ vfitem.habitation?vfitem.habitation:'' }}</view>
					<view class="verified-cate" v-else></view>
					<view class="shiming" v-if="vfitem.materialstatus==1">
						<image src="https://friend.tanshishang.cn/assets/img/shiming.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 遮盖层 -->
		<view :class="[serviseShow?'maskActive':'maskActiver']" class="mask" v-if="maskShow" @tap="close">
			<scroll-view class="box" scroll-y="true" @tap.stop>
				<!-- 爱情id -->
				<view class="gender" style="margin-top: 44px;display: flex;">
					<view class="gender-title">爱情ID</view>
					<view class="gender-box">
						<input type="text" v-model="searchInfo.loveId" placeholder="请输入" class="cus-placeholder" />
					</view>
				</view>
				<view class="gender">
					<view class="gender-title">性别</view>
					<view class="gender-box">
						<view :class="searchInfo.gender== item.id? 'gender-activer':''" v-model="searchInfo.gender" class="gender-item"
						 v-for="(item,index) in data.gender" :key="index" @tap="chooseGender(index)">
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				<!-- 年龄 -->
				<view class="age">
					<view class="age-title">年龄</view>
					<view class="age-box">
						<view :class="searchInfo.age==ageItem.id? 'age-activer':''" v-model="searchInfo.age" class="age-item" v-for="(ageItem,ageIndex) in data.age"
						 :key="ageIndex" @tap="chooseAge(ageIndex)">
							<text>{{ ageItem.age}}</text>
						</view>
					</view>
				</view>
				<!-- 地区 -->
				<!-- 				<view class="area">
					<view class="area-title">地区</view>
					<view class="area-box">
						<view :class="{'area-activer':areaItem.selected}" class="area-item" v-for="(areaItem,areaIndex) in search.areaArr"
						 :key="areaIndex" @tap="chooseArea(areaIndex)">
							<text>{{ areaItem.area }}</text>
						</view>
					</view>
				</view> -->
				<!-- 收入 -->
				<view class="income">
					<view class="income-title">收入</view>
					<view class="income-box">
						<view :class="searchInfo.income==incomeItem.id? 'income-activer':''" v-model="searchInfo.income" class="income-item"
						 v-for="(incomeItem,incomeIndex) in data.income" :key="incomeIndex" @tap="chooseIn(incomeIndex)">
							<text>{{ incomeItem.income }}</text>
						</view>
					</view>
				</view>
				<!-- 确定按钮 -->
				<view class="btn">
					<text class="reset" @tap="reset">重置</text>
					<text class="btn-con" @tap="doResult">确定</text>
				</view>
			</scroll-view>
		</view>

		<!-- 返回顶部 -->
		<view class="back" v-if="goBack" @tap="toTop()">
			<image src="/static/images/index/back.png" mode=""></image>
		</view>

	</view>
</template>

<script>
	import {
		arrData
	} from '@/common/arr';
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token', 'userId'])
		},
		data() {
			return {
				//返回顶部
				goBack: false,
				serviseShow: false,
				maskShow: false,
				allList: [],
				data: {},
				page: 1,
				pages: null,
				//search
				searchInfo: {
					gender: '',
					age: '',
					area: '',
					income: '',
					loveId: '',
				},
				search: {
					genderArr: [],
					ageArr: [{
							age: '25以下',
							selected: false
						},
						{
							age: '25-30',
							selected: false
						},
						{
							age: '30-35',
							selected: false
						},
						{
							age: '35-40',
							selected: false
						},
						{
							age: '40-45',
							selected: false
						},
						{
							age: '45-50',
							selected: false
						},
						{
							age: '50以上',
							selected: false
						}
					],
					areaArr: [],
					incomeArr: [],
				},
				//认证会员
				verifiedList: [],
				u:{},
			};
		},
		//分享给个人
		onShareAppMessage() {
			return {
				title: '青年交友',
				imageUrl: 'https://friend.tanshishang.cn/assets/img/shareImg.png',
				path: '/pages/index/index'
			}
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: '青年交友',
				path: '/pages/index/index'
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			// console.log('下拉刷新');
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.page = 1;
				this.verifiedList = [];
				this.getData();
			}, 1000)
		},
		//上拉加载
		onReachBottom() {
			// console.log('触发上拉加载');
			if (this.page < this.pages) {
				this.page++;
				this.getData();

			} else {
				uni.showToast({
					title: '到底了!',
					icon: 'none'
				})
			}
		},
		onLoad() {
			//获取数组数据
			// this.getArr();
			this.data = arrData

			let info = uni.getStorageSync('search');
			if (info.gender || info.age || info.area || info.income) {
				this.searchInfo = info;
				//执行搜索
				this.page = 1;
				this.verifiedList = [];
				this.getData();
				console.log(this.searchInfo);
			} else {
				this.page = 1;
				this.verifiedList = [];
				this.getData();
			}

		},
		onShow() {
			// if (!this.u || this.u.id <= 0) {
			// 	uni.navigateTo({
			// 		url: "/pages/index/wxLogin"
			// 	})
			// 	return
			// }
			// this.getMsg();

		},
		//监听页面滚动
		onPageScroll(e) {
			// console.log(e);
			if (e.scrollTop >= 500) {
				//显示返回顶部按钮
				this.goBack = true;
			} else {
				this.goBack = false;
			}
		},
		//页面隐藏时移除本地存储
		onHide() {
			//关闭蒙层
			this.maskShow ? this.maskShow = false : '';

			uni.removeStorageSync('search');
		},
		methods: {
			//获取消息数
			async getMsg() {
				// let token = uni.getStorageSync('token');
				// let userId = uni.getStorageSync('userId');
				// console.log(token);
				if (this.token) {
					try {
						let params = {
							token: this.token,
							userId: this.userId
						}
						let res = await this.$request.request.get('/api/user/noRead', params);
						console.log(res.data);
						this.$common.setCartBadge(res.data.count);
					} catch (err) {
						this.$request.error(err, this)
					}
				}

			},
			//前往个人详情
			toPersonal(e) {

				// if (!this.token) {
				// 	uni.showModal({
				// 		title: '您还未登录',
				// 		content: '点击登录,登录后可查看更多!',
				// 		showCancel: true,
				// 		confirmText: '登录',
				// 		success: (res) => {
				// 			// console.log(res);
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/index/wxLogin"
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}

				// 		}
				// 	});
				// 	return false;
				// }

				if (e.gender == 1) {
					//男
					uni.navigateTo({
						url: '/pages/recommend/personal?type=0&id=' + e.id
					})
				} else {
					//女
					uni.navigateTo({
						url: '/pages/recommend/personal?type=1&id=' + e.id
					})
				}
			},
			//获取全部数组
			async getArr() {
				try {
					let res = await this.$request.request.get('/api/other/getAera');
					console.log(res.data);
					this.allList = { ...res.data
					};
					this.init();
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//获取所有数据
			async getData() {
				try {
					let params = {
						token: this.token,
						page: this.page,
						id: this.searchInfo.loveId,
						gender: this.searchInfo.gender,
						age: this.searchInfo.age,
						// habitation: this.searchInfo.area,
						income: this.searchInfo.income
					};
					let res = await this.$request.request.get('/api/index/index', params)
					console.log(res);
					if (res.code == 200) {
						//关闭蒙层
						this.close();
						if (res.data.info.length > 0) {
							this.verifiedList = this.verifiedList.concat(res.data.info);
							this.pages = res.data.pageInfo.pages;
						} else {
							uni.showToast({
								title: '暂无更多数据!',
								icon: 'none'
							})
						}
						//移除本地存储
						let infos = uni.getStorageSync('search');
						if (infos) {
							this.searchInfo = {
								gender: '',
								age: '',
								area: '',
								income: ''
							};
							uni.removeStorageSync('search');
						}
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//选择性别
			chooseGender(index) {
				this.searchInfo.gender = this.data.gender[index].id
				// const arr = [...this.search.genderArr];
				// //先循环整个数组解除已选
				// for (let i in arr) {
				// 	if (arr[i].selected) {
				// 		arr[i].selected = false;
				// 	}
				// }
				// //再设置选项
				// this.search.genderArr[e].selected = true;
				// //添加进检索对象
				// this.searchInfo.gender = this.allList.gender[e].gender;
			},
			//选择年龄
			chooseAge(index) {
				this.searchInfo.age = this.data.age[index].id
				// const arr = [...this.search.ageArr];
				// //先循环整个数组解除已选
				// for (let i in arr) {
				// 	if (arr[i].selected) {
				// 		arr[i].selected = false;
				// 	}
				// }
				// //再设置选项
				// this.search.ageArr[e].selected = true;
				// //添加进检索对象
				// this.searchInfo.age = this.search.ageArr[e].age;
			},
			//选择地区
			chooseArea(e) {

				// const arr = [...this.search.areaArr];
				// //先循环整个数组解除已选
				// for (let i in arr) {
				// 	if (arr[i].selected) {
				// 		arr[i].selected = false;
				// 	}
				// }
				// //再设置选项
				// this.search.areaArr[e].selected = true;
				// //添加进检索对象
				// this.searchInfo.area = this.allList.area[e].id;
			},
			//选择收入
			chooseIn(e) {
				this.searchInfo.income = this.data.income[e].id
				// const arr = [...this.search.incomeArr];
				// //先循环整个数组解除已选
				// for (let i in arr) {
				// 	if (arr[i].selected) {
				// 		arr[i].selected = false;
				// 	}
				// }
				// //再设置选项
				// this.search.incomeArr[e].selected = true;
				// //添加进检索对象
				// this.searchInfo.income = this.allList.income[e].id;
			},
			//执行检索
			doResult() {
				// if (this.searchInfo.gender == '' && this.searchInfo.age == '' && this.searchInfo.area == '' && this.searchInfo.income ==
				// 	'') {
				// 	uni.showToast({
				// 		title: '请先选择检索条件!',
				// 		icon: 'none'
				// 	})
				// 	return false;
				// }

				//重置参数
				this.page = 1;
				this.pages = null;
				this.verifiedList = [];

				//执行搜索
				this.getData();

			},
			//重置检索
			reset() {
				// if (this.searchInfo.gender == '' && this.searchInfo.age == '' && this.searchInfo.area == '' && this.searchInfo.income ==
				// 	'') {
				// 	uni.showToast({
				// 		title: '请先选择检索条件!',
				// 		icon: 'none'
				// 	})
				// 	return false;
				// }

				//先循环整个数组解除已选
				// for (let i in this.search.genderArr) {
				// 	if (this.search.genderArr[i].selected) {
				// 		this.search.genderArr[i].selected = false;
				// 	}
				// }

				// for (let j in this.search.ageArr) {
				// 	if (this.search.ageArr[j].selected) {
				// 		this.search.ageArr[j].selected = false;
				// 	}
				// }

				// for (let k in this.search.areaArr) {
				// 	if (this.search.areaArr[k].selected) {
				// 		this.search.areaArr[k].selected = false;
				// 	}
				// }

				// for (let t in this.search.incomeArr) {
				// 	if (this.search.incomeArr[t].selected) {
				// 		this.search.incomeArr[t].selected = false;
				// 	}
				// }

				//设置检索对象为空
				this.searchInfo.gender = '';
				this.searchInfo.age = '';
				this.searchInfo.area = '';
				this.searchInfo.income = '';
				this.searchInfo.loveId = '';
				// this.getData()
			},
			//切换蒙层
			change() {

				// if (!this.token) {
				// 	uni.showModal({
				// 		title: '您还未登录',
				// 		content: '点击登录,登录后可查看更多!',
				// 		showCancel: true,
				// 		confirmText: '登录',
				// 		success: (res) => {
				// 			// console.log(res);
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/index/wxLogin"
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}

				// 		}
				// 	});
				// 	return false;
				// }

				this.serviseShow = true;
				this.maskShow = true;
			},
			//直接关闭了蒙层
			close() {
				this.serviseShow = false;
				setTimeout(() => {
					this.maskShow = false;
				}, 450)
			},
			//重置数组
			init() {
				//性别数组
				for (let i in this.allList.gender) {
					if (this.allList.gender[i].name) {
						let obj = {};
						obj.gender = this.allList.gender[i].name;
						obj.selected = false;
						this.search.genderArr.push(obj);
					}
				}

				//居住地
				for (let i in this.allList.area) {
					if (this.allList.area[i].shortname) {
						let obj = {};
						obj.area = this.allList.area[i].shortname;
						obj.selected = false;
						this.search.areaArr.push(obj)
					}
				}

				//月收入数组
				for (let i in this.allList.income) {
					if (this.allList.income[i].income) {
						let obj = {};
						obj.income = this.allList.income[i].income;
						obj.selected = false;
						this.search.incomeArr.push(obj)
					}
				}

			},
			//点击返回顶部
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 600,
				});
			}
		}
	}
</script>

<style lang="scss">
	@import 'recommend.scss';
</style>
